<template>
  <div class="fill">
    <el-scrollbar class="body" :noresize="true">
      <div class="body-content">
        <div v-loading="data.loading" class="region shadow">
          <!-- 今日指标 -->
          <div class="region-uv-data">
            <div class="jrzb">
              <div class="jrzb-title">
                <div class="jrzb-title-left">今日UV</div>
                <div class="jrzb-title-count">342</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: red">8.67%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">昨日UV</div>
                <div class="jrzb-title-count">442</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: red">9.67%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">新用户</div>
                <div class="jrzb-title-count">42</div>
                <div class="jrzb-title-right">
                  同比上周
                  <label style="color: #07f049">24.97%</label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">近7日UV</div>
                <div class="jrzb-title-count">3432</div>
                <div class="jrzb-title-right">
                  <label style="color: red"></label>
                </div>
              </div>
              <div style="border: 1px solid #e6e6e6; margin: 12px"></div>
              <div class="jrzb-title">
                <div class="jrzb-title-left">近30日UV</div>
                <div class="jrzb-title-count">32859</div>
                <div class="jrzb-title-right">
                  、
                  <label style="color: red"></label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="region">
          <!-- 顶部统计卡片 -->
          <div class="stats-cards">
            <StatsCard
              title="今日访问"
              class="stats-card"
              :value="visitCount"
              icon="View"
            />
            <StatsCard
              title="新增用户"
              class="stats-card"
              :value="userCount"
              icon="User"
            />
            <StatsCard
              title="订单量"
              class="stats-card"
              :value="orderCount"
              icon="ShoppingCart"
            />
            <StatsCard
              title="待处理"
              class="stats-card"
              :value="pendingTasks"
              icon="Bell"
            />
          </div>
        </div>
        <div class="region">
          <!-- 内容区 -->
          <div class="content">
            <!-- 左侧：代办事项 -->
            <el-card class="card todo-card" body-style="height:400px;">
              <todo-list />
            </el-card>

            <!-- 中间：数据增长图表 -->
            <el-card class="card chart-card" body-style="height:400px;">
              <GrowthChart />
            </el-card>

            <!-- 右侧：最近动态 -->
            <el-card class="card activity-card" body-style="height:400px;">
              <RecentActivity />
            </el-card>
          </div>
        </div>
        <div
          class="region shadow"
          style="border-radius: 4px; padding: 12px; background-color: #fff"
        >
          <div v-loading="data.loading">
            <div
              id="maincp"
              style="width: 100%; height: 280px; background-color: #fff"
            ></div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, reactive, ref } from "vue";
import { echarts_PaginationAsync } from "@/api/Vip/Vips";
import { Get_counts } from "@/api/OnlineCustomers/index";
import { LoginAsync_phb } from "@/api/login";
import { useRouter } from "vue-router";
import StatsCard from "@/components/Home/StatsCard.vue";
import GrowthChart from "@/components/Home/GrowthChart.vue";
import RecentActivity from "@/components/Home/RecentActivity.vue";
import TodoList from "@/components/TodoList/TodoList.vue";
// 数据模拟
const visitCount = ref(1000);
const userCount = ref(50);
const orderCount = ref(200);
const pendingTasks = ref(10);

// 模拟数据增长动画
onMounted(() => {
  const interval = setInterval(() => {
    visitCount.value += Math.floor(Math.random() * 10);
    userCount.value += Math.floor(Math.random() * 2);
    orderCount.value += Math.floor(Math.random() * 5);
    pendingTasks.value += Math.floor(Math.random() * 1);
  }, 2000);

  setTimeout(() => clearInterval(interval), 15000); // 15秒后停止模拟增长
});
const data = reactive({
  vipdata: [],
  sxxxdata: [],
  phbdata: [],
  loading: false,
});
const router = useRouter();
const region1 = ref(null);
// 新增活动
const addActivity = () => {
  router.push("/activity/addActivity");
};

// 进行中活动
const underway = () => {
  router.push("/activity/underwayActivity");
};

// 已结束活动
const finish = () => {
  router.push("/activity/finishActivity");
};

const bind = async () => {
  data.loading = true;
  //会员数据-饼图
  const res = await echarts_PaginationAsync();
  if (res.code === 0) {
    data.vipdata = res.data.data;
  }
  //客户数量-饼图
  const resc = await Get_counts();
  if (resc.code === 0) {
    data.sxxxdata = resc.data.data;
  }
  //排行榜
  const resphb = await LoginAsync_phb();
  if (resphb.code === 0) {
    data.phbdata = resphb.data.data;
  }
  data.loading = false;
};

onMounted(async () => {});
</script>

<style scoped>
.body {
  max-height: 100%;
  background-color: #f3f7f8;
  border-radius: 4px;
}

.stats-cards {
  display: flex;
  gap: 20px;
}

.stats-card {
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.stats-card:hover {
  scale: 1.02;
}

.content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
}

.todo-card {
  width: 30%;
}

.chart-card {
  width: 40%;
}

.activity-card {
  width: 30%;
}

.body-content {
  padding: 0.1px 0;
}

.shadow {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.region {
  margin: 16px;
  position: relative;
}

.region-uv-data {
  width: 100%;
  height: 120px;
  display: flex;
}

.jrzb {
  width: 100%;
  background-color: #fff;
  display: flex;
}

.jrzb-title {
  width: calc(17% - 24px);
  height: calc(100% - 24px);
  padding: 12px;
}

.jrzb-title-left {
  font-size: 12px;
  color: #565454;
}

.jrzb-title-count {
  font-size: 30px;
  margin-top: 6px;
}

.jrzb-title-right {
  font-size: 10px;
  color: #706f6f;
  width: 100%;
  margin-top: 6px;
}

.xxh-title {
  width: 100%;
  height: 26px;
}

.xxh-list {
  width: 100%;
  height: calc(100% - 26px);
  background-color: #fff;
}

.xxh-list-item {
  width: 100%;
  height: calc(30px - 8px);
  margin: 4px 0 4px 0;
  display: flex;
}

.item-xh {
  width: calc(30px - 4px);
  height: calc(100% -4px);
  margin: 2px 12px 2px 12px;
  background-color: #000;
  color: #fff;
  margin-right: 12px;
  text-align: center;
  border-radius: 50%;
}

.item-xhs {
  width: calc(30px - 4px);
  height: calc(100% -4px);
  margin: 2px 12px 2px 12px;
  background-color: #ddd;
  color: #fff;
  margin-right: 12px;
  text-align: center;
  border-radius: 50%;
}

.item-name {
  width: 100px;
  font-size: 13px;
  padding-top: 2px;
  color: #1e1d1d;
}

.item-jdt {
  width: 340px;
}

.item-jdt .el-progress--line {
  margin-top: 4px;
  margin-bottom: 15px;
  max-width: 400px;
}
.stats-cards {
  display: flex;
  gap: 20px;
}

.content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.card {
  flex: 1;
  transition: all 0.3s ease-in-out;
}

.todo-card {
  width: 30%;
}

.chart-card {
  width: 40%;
}

.activity-card {
  width: 30%;
}
</style>
